<template>
  <div class="section">
    <div class="container">
      <!--Title-->
      <div class="section-title has-text-centered">
        <h2 class="title is-2">Simplify processes</h2>
        <h4>Diplamo makes it easy to issue and recieve certificates</h4>
      </div>

      <div class="centered-mockup-wrapper">
        <div class="mockup-container mb-6">
          <!--Mockup-->
          <img
            class="light-image-l centered-mockup"
            src="/@src/assets/illustrations/landing/ui-example.png"
            alt=""
          />
          <img
            class="dark-image-l centered-mockup"
            src="/@src/assets/illustrations/landing/ui-example.png"
            alt=""
          />
        </div>
        <div class="columns">
          <div class="column is-4">
            <h3 class="title is-4">Simple UI</h3>
            <p class="subtitle is-6 light-text">
              The app has a simple design that is easy to use by both
              administrators and students.
            </p>
          </div>
          <div class="column is-4">
            <h3 class="title is-4">Tailored solution</h3>
            <p class="subtitle is-6 light-text">
              Designed to make it easy for large academic institutions to
              modernize processes.
            </p>
          </div>
          <div class="column is-4">
            <h3 class="title is-4">Secure registry</h3>
            <p class="subtitle is-6 light-text">
              Data is registered in the blockchain, a public ledger backed by
              cryptographic protocols.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
